<template>
    <div>
        <!-- 头部 -->
        <bnItem
            v-if="isFixedShow('header_base_info_1')"
            name="header_base_info_1"
            :row="getRow(header_base_info_1)"
            :isEdit="isEdit"
            @update="update"
            @loadSuccess="loadSuccess"
        />
        <!-- 内容区域 -->
        <div class="resume_content_all p-r-30 p-l-40">
            <div class="resume_content_all-main p-t-8">
                <div class="resume_content">
                  <!-- <pre>
                    {{  list1[5]  }}
                  </pre> -->
                    <bnItem
                        :name="item.component_code"
                        v-for="(item, index) in list1"
                        :key="index"
                        :row="getRow(item)"
                        :isEdit="isEdit"
                        @update="update"
                        @loadSuccess="loadSuccess"
                    />
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import bnItem from '@/components/bn/bnItem.vue'
export default {
    components: {
        bnItem,
    },
    props: {
        isEdit: {
            type: Boolean,
            default: false,
        },
        config: {
            type: Object,
            default: () => {
                return {
                    list: [],
                }
            },
        },
    },
    data() {
        return {}
    },
    computed: {
        // 固定项数据
        header_base_info_1() {
            return (
                this.config.list.find((item) => item.component_code == 'header_base_info_1') || {}
            )
        },
        // 直接循环项
        list1() {
            return this.config.list.filter((item) => item.component_code !== 'header_base_info_1')
        },
    },
    methods: {
        isFixedShow(name){
            return this.config.list.some((item) => item.component_code === name)
        },
        getRow(row) {
            if (!row) {
                return {}
            }

            return row[row.row_code] || {}
        },
        update(row) {
            this.$emit('update', row)
        },
        loadSuccess(row) {
            this.$emit('loadSuccess', row)
        },
    },
}
</script>

<style lang="scss" scoped>
$color: #4e7282;
.bg-c {
    background-color: $color;
}
.border-c {
    border-color: $color;
}
.resume_head {
    padding: 15px 50px 15px 30px;
}
.resume_head_left {
    height: 52px;
    color: $color;
    border-right: 2px solid $color;
}
.f-38 {
    font-size: 38px;
}

.line_l {
    float: left;
    width: calc(70% - 18px);
    background-color: #4e7282;
    height: 18px;
    position: relative;
    i {
        display: block;
        width: 0;
        height: 0;
        overflow: hidden;
        border-style: solid;
        border-width: 18px 0 0 18px;
        border-color: transparent transparent transparent #4e7282;
        position: absolute;
        left: 100%;
        top: 0;
    }
}
.line_r {
    float: left;
    width: 30%;
    height: 12px;
    margin: 6px 0 0 23px;
    background-color: #c19f67;
    position: relative;
    i {
        display: block;
        width: 0;
        height: 0;
        overflow: hidden;
        border-style: solid;
        border-width: 12px 0 0 12px;
        border-color: #c19f67 transparent transparent;
        position: absolute;
        left: -12px;
        top: 0;
    }
}
.resume_content_all {
}
.resume_content_all-main {
    border-left: 1px solid $color;
}
.resume_content {
}
.module_tit {
    position: relative;
    margin-left: -16px;
    display: inline-block;
    vertical-align: top;
    min-width: 140px;
    height: 24px;
    line-height: 24px;
    font-size: 16px;
    font-weight: 400;
    background-color: #4e7282;
    color: #fff;
    .tit_icon {
        height: 100%;
        width: 50px;
        position: absolute;
        right: -1px;
        top: 0;
        overflow: hidden;
        .line-1 {
            display: block;
            width: 27px;
            height: 50px;
            overflow: hidden;
            border-style: solid;
            border-width: 26px 0 0 26px;
            background-color: #fff;
            position: absolute;
            right: -12px;
            top: -18px;
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
        }
        .line-2 {
            border: 2px solid #fff;
            display: block;
            content: '';
            width: 7px !important;
            height: 50px !important;
            position: absolute;
            right: 25px;
            top: -12px;
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
        }
    }
    .dfn {
        display: block;
        width: 0;
        height: 0;
        overflow: hidden;
        border-style: solid;
        border-width: 9px 0 0 16px;
        border-color: #4e7282 transparent transparent;
        position: absolute;
        left: 0;
        top: 100%;
    }
}
.module_tit-span {
    display: block;
    width: 100%;
    height: 100%;
    padding-left: 25px;
    padding-right: 50px;
    background-color: #4e7282;
    color: #fff;
    white-space: nowrap;
    position: relative;
}
.grid-clumn-2 {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 10px;
}
.resume_content_main {
    padding: 14px 20px;
}

.dor-ul {
    list-style: disc;
    padding-left: 30px;
}
.dor-li {
    list-style: disc;
    color: #666;
    line-height: 24px;
}
.user-avtor {
    width: 98px;
    height: 114px;
    object-fit: cover;
}
.line_box {
    height: 1px;
}
</style>
